<template>
	<view class="car">
		<uni-nav-bar left-icon="back" fixed @click-left="back" title="我的地产">
			<view @click="apply" loft="right" class="top_right">申请店家</view>
		</uni-nav-bar>
		<view class="main">
			<block v-for="(item, index) in list" :key="index">
				<view class="pannel">
					<view class="left">
						<image :src="item.thumb" mode="widthFix"></image>
					</view>
					<view class="right">
						<view class="title">{{ item.name }}</view>
						<view class="subtitle">
							<text v-for="(introduce, introduce_key) in item.introduce" :key="introduce_key">{{ introduce }}</text>
						</view>
						<view class="bottom">
							<text class="money">{{ item.pay_amount }}万</text>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import uniIcons from '@/components/uni-icons/uni-icons.vue';
	export default {
		components: {
			uniNavBar,
			uniIcons
		},
		data() {
			return {
				list: []
			};
		},
		onLoad() {
			this.getData();
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			apply() {
				uni.navigateTo({
					url: '/pages/house_property/applyShop/applyShop'
				})
			},
			getData() {
				let authData = uni.getStorageSync('authData');
				if (authData.auth) {
					this.$request
						.post('/mine/getMyLanded', {
							data: {},
							header: {
								Authorization: authData.auth
							}
						})
						.then(res => {
							this.list = res.data.data.list;
							console.log(res.data.data.list);
						});
				} else {
					uni.showToast({
						title: '请先登录',
						icon: 'none',
						duration: 2000
					});
					setTimeout(function() {
						uni.navigateTo({
							url: '/pages/login/login'
						});
					}, 2000);
				}
			}
		}
	};
</script>

<style lang="scss">
	.car {
		background-color: #F5F6F7;
	}

	.top_right {
		width: 180upx;
		text-align: right;
		position: absolute;
		top: 0;
		right: 20upx;
		font-size: $uni-font-size-base;
		color: #333;
	}

	.shopName {
		display: flex;
		background-color: #e7e7e7;
		width: 100%;
		font-size: $uni-font-size-lg;
		color: #333;
		box-sizing: border-box;
		line-height: 100upx;
		padding: 0 20upx;
	}

	.btns {
		width: 100%;
		height: 100upx;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #ffffff;

		.btn {
			width: 300upx;
			height: 100%;
			text-align: center;
			font-size: $uni-font-size-lg;
			background-color: red;
			color: #fff;
			position: absolute;
			top: 0;
			right: 0;
			line-height: 100upx;
		}
	}

	.main {
		padding: 30upx;
		box-sizing: border-box;
	}

	.pannel {
		background-color: #ffffff;
		width: 100%;
		height: 220upx;
		margin-bottom: 20upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		border-radius: 20upx;
		overflow: hidden;

		.left {
			width: 230upx;
			height: 220upx;
			overflow: hidden;

			image {
				height: 100%;
			}
		}

		.right {
			width: calc(100% - 230upx);
			height: 100%;
			box-sizing: border-box;
			padding: 15upx;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: space-between;
			box-sizing: border-box;
			padding-left: 20upx;
			line-height: 1.5em;
			font-size: $uni-font-size-base;
			color: $uni-color-subtitle;

			.subtitle {
				color: #999999;
				font-size: $uni-font-size-base;
				display: flex;
				flex-wrap: wrap;

				text {
					margin-right: 10upx;
				}
			}

			.title {
				font-size: $uni-font-size-lg;
				color: #333333;
				font-size: $uni-font-size-lg;
			}

			.bottom {
				font-size: $uni-font-size-base;
				color: #f33632;

				.money {
					font-weight: 700;
				}
			}
		}
	}

	.shoptitle {
		font-size: 10px;
	}
</style>
